<!DOCTYPE HTML>
<html>
<head>

	<style type="text/css">
        #div1{
        	width:200px;height:100px;border:1px solid #ccc;padding-top: 30px;
        }
	</style>
	<script type="text/javascript">
	    // 被拖到的数据
	    function drag(event){
	    	event.dataTransfer.setData("Text",event.target.id);
	    }

	    //在何处放置拖动的数据
	    function allowDrop(event){
            event.preventDefault();  //允许放置，阻止默认处理方式（不允许放置）
	    }

	    //进行放置
	    function drop(event){
	    	event.preventDefault();//设置允许放置
	    	var data = event.dataTransfer.getData("Text");//获取被拖动内容
	    	event.target.appendChild(document.getElementById(data));//添加节点，拖动到某处
	    }
	    




	</script>
	
</head>
<body>

   <p>请把W3School的图片拖到矩形中:</p>
   <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <br/>
   <img id="drag1" src="images/eg_dragdrop_w3school.gif" ondraggable="true" ondragstart="drag(event)">

</body>
</html>

  <!-- 

        1.drggable属性

        如果网页元素的draggable元素为true，这个元素就是可以拖动的。


	    2.事件
		dragstart:网页元素开始拖动时触发。
		drag:被拖动的元素在拖动过程中持续触发。
		dragenter:被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
		dragleave:被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
		dragover:被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
		drap:被拖动元素或从文件系统选中的文件，拖放落下时触发。
		dragend:网页元素拖动结束时触发。
		注意：以上这些事件都可以指定回调函数。


		3.dataTransfer对象

		拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息。


		4、dataTransfer对象的属性：

		**dropEffect:**拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
		effectAllowed:指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
		files:包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
		types:储存在DataTransfer对象的数据的类型。


        5、dataTransfer对象的方法：
		**setData(format, data):**在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
		**getData(format):**从dataTransfer对象取出数据。
		**clearData(format):**清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
		**setDragImage(imgElement, x, y):**指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。
	-->


